<template>
  <div>
    <t-image-viewer
      :visible="visible"
      :title="title"
      :images="images"
      :index="index"
      @index-change="onIndexChange"
      @close="close"
    >
    </t-image-viewer>
    <t-popconfirm
      v-model="popVisible"
      :popup-props="{ placement: 'left' }"
      theme="danger"
      content="您将删除当前图片，确定吗？"
      @confirm="del"
    >
      <div v-if="visible" class="del">
        <t-icon name="delete"></t-icon>
      </div>
    </t-popconfirm>
  </div>
</template>

<script setup lang="ts">
import { ImageInfo } from 'tdesign-vue-next';
import { ref } from 'vue';

import { deletePictureApi } from '@/api/medicinal';

const { images, ids, title, visible } = defineProps({
  images: {
    type: Array<string | File | ImageInfo>,
    default: () => [],
  },
  ids: {
    type: Array<number>,
    default: () => [],
  },
  title: {
    type: String,
    default: '图集预览',
  },
  visible: {
    type: Boolean,
    default: false,
  },
});
const index = ref(0);
const onIndexChange = (i: number) => {
  index.value = i;
};
const emit = defineEmits(['close']);
const close = () => {
  emit('close');
};
const del = async () => {
  await deletePictureApi(ids[index.value]);
  popVisible.value = false;
  close();
};
const popVisible = ref(false);
</script>

<style lang="less" scoped>
.tdesign-demo-image-viewer__ui-image {
  width: 100%;
  height: 100%;
  display: inline-flex;
  position: relative;
  justify-content: center;
  align-items: center;
  border-radius: var(--td-radius-small);
  overflow: hidden;
}

.tdesign-demo-image-viewer__ui-image--hover {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.del {
  position: fixed;
  bottom: 41px;
  right: 40px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #fff;
  background: red;
  border-radius: 50%;
  z-index: 9999;
}
</style>
